<div class="audits" *ngIf="audits">
    <table class="ui fixed celled table" *ngIf="getDataForCurrentPage().length > 0">
        <thead>
            <tr>
                <th class="eight wide column">{{ 'audit_time_author' | translate}}</th>
                <th class="eight wide pl50 column">{{ 'audit_change' | translate}}</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let a of getDataForCurrentPage()">
                <td>
                    {{ a.versionned | amLocal | amDateFormat: 'DD/MM/YYYY HH:mm' }} {{ '(' + a.author + ')' }}
                </td>
                <td>
                    <app-variable-diff [type]="a.type" [variableAfter]="a.variable_after"
                        [variableBefore]="a.variable_before"></app-variable-diff>
                </td>
            </tr>
        </tbody>
        <tfoot *ngIf="getNbOfPages() > 1">
            <tr>
                <th colspan="2">
                    <div class="ui right floated pagination menu">
                        <a class="icon item" (click)="downPage()">
                            <i class="left chevron icon"></i>
                        </a>
                        <a class="item" *ngFor="let page of getNbOfPages() | ngForNumber" (click)="goTopage(page)"
                            [class.active]="currentPage === page">{{page}}</a>
                        <a class="icon item" (click)="upPage()">
                            <i class="right chevron icon"></i>
                        </a>
                    </div>
                </th>
            </tr>
        </tfoot>
    </table>
    <div class="ui info message" *ngIf="!getDataForCurrentPage()">
        {{ 'audit_loading' | translate }}
    </div>
    <div class="ui info message" *ngIf="getDataForCurrentPage() && getDataForCurrentPage().length === 0">
        {{ 'audit_no' | translate }}
    </div>
</div>
